﻿/*

            This file is distributed as part of the mojomo modular front end design framework for mojoPortal CMS; 
            find more at mojomo.co.uk or mojomo.codeplex.com	
    
            This file was NOT written by freshangle. Credit where it is due! 
            

Name:       mobile.css

Author:     h5bp/mobile-boilerplate

Version:    1.0

Purpose:    Mobile helper class and media query - 
    
            https://github.com/h5bp/mobile-boilerplate/wiki/The-Style
    
    

*/	


/* -------------------------------------------  mobile ------------------------------------------------*/



/*We use CSS bubbling up for mobile first responsive design*/


/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}


/*Tip (only if you care about older IEs) - Normalize em-size for BlackBerry OS6 (issue #85)

All browsers in the universe (that I know of) use a default em-size of 16px. 
The only exception to this rule is BlackBerry OS6 which uses different default 
font-sizes on different devices (22px and even 17px). 
This causes serious layout issues in em-based layouts on these devices. 
The way to solve this is to put the following code into the stylesheet:*/

/*This will normalize the base font-size for all current and future browsers. 
It does remove the ability to adjust the font-size in the browser in IE9 though 
so you might want to put the code in a somewhat restricting mediaquery:*/

@media all and (max-width: 480px) {
    :root {
        font-size: 16px;
    }
}

/*Prevent callout*/

.nocallout {-webkit-touch-callout: none;}

/*HTML5 contenteditable attribute on mobile*/

textarea.contenteditable {-webkit-appearance: none;}

/*S60 3.x and 5.0 devices which animated gif fix*/

.displaynone{position: absolute; left: -100%;}

/*Text overflow with ellipsis*/

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
